<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neon Admin Panel">
    <meta name="author" content="">

    <title>学历分布</title>
    <link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="/static/css/entypo.css">
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/neon-core.css">
    <link rel="stylesheet" href="/static/css/neon-theme.css">
    <link rel="stylesheet" href="/static/css/neon-forms.css">
    <link rel="stylesheet" href="/static/css/custom.css">

    <script src="/static/js/jquery-1.11.0.min.js"></script>

    <!--[if lt IE 9]>
    <script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<body class="page-body  page-left-in" data-url="http://neon.dev">

<div class="page-container">
    <div class="sidebar-menu">
        <header class="logo-env">
            <div class="logo">
                <a href="index.html">
                    <h3 style="color:#fff;font-weight:bold;margin-top:5px">智联招聘可视化分析</h3>
                </a>
            </div>
        </header>
        <div class="sidebar-user-info">

            <div class="sui-normal">
                <a href="#" class="user-link">
                    <img style="width:95%;border-radius:50%" src="/media/{{ userInfo.avatar }}" width="120" alt="">
                    <span style="text-align:center;padding-top:209px">欢迎回来,</span>
                    <strong style="text-align:center;margin-top:5px">{{ userInfo.username }}</strong>
                </a>
            </div>
        </div>
        <ul id="main-menu" class="">
            <li>
                <a href="/myApp/home">
                    <i class="entypo-gauge"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-user"></i>
                    <span>个人中心</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/selfInfo">
                            <span>个人信息</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/changePassword">
                            <span>修改密码</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-layout"></i>
                    <span>数据统计</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/tableData">
                            <span>数据总览</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/historyTableData">
                            <span>历史查阅</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="opened active">
                <a href="#">
                    <i class="entypo-chart-pie"></i>
                    <span>可视化图表</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/salary">
                            <i class="entypo-light-down"></i>
                            <span>薪资情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/company">
                            <i class="entypo-feather"></i>
                            <span>企业情况</span>
                        </a>
                    </li>
                    <li >
                        <a href="/myApp/companyTags">
                            <i class="entypo-feather"></i>
                            <span>词云分析</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="/myApp/educational">
                            <i class="entypo-graduation-cap"></i>
                            <span>学历分布</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/companyStatus">
                            <i class="entypo-network"></i>
                            <span>市场技术</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
    <div class="main-content">
        <div class="row" style="display:flex">
            <div style="margin-left: auto" class="col-md-6 col-sm-4 clearfix hidden-xs">

                <ul class="list-inline links-list pull-right">
                    <li class="sep"></li>

                    <li>
                        <a href="/myApp/logOut">
                            退出登录<i class="entypo-logout right"></i>
                        </a>
                    </li>
                </ul>

            </div>
        </div>
        <hr>
        <ol class="breadcrumb bc-3">
            <li>
                <a href="#"><i class="entypo-home"></i>可视化图标</a>
            </li>
            <li class="active">
                <strong>
                    学历分布
                </strong>
            </li>
        </ol>
        <h2>学历分布</h2>
        <br>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-info" data-collapsed="0">
                    <div class="panel-heading">
                        <div class="panel-title">选择输入框</div>
                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <form action="/myApp/educational" method="GET">
                            <div class="col-md-4">
                                <select name="educational" class="form-control">
                                    {% if defaultEducation == '不限' %}
                                        <option selected value="不限">不限</option>
                                    {% else %}
                                        <option value="不限">不限</option>
                                    {% endif %}
                                    {% for i in educations %}
                                        {% if i == defaultEducation %}
                                            <option selected value="{{ i }}">{{ i }}</option>
                                        {% else %}
                                            <option value="{{ i }}">{{ i }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-info">提交</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <div class="panel-heading">
                        <div class="panel-title">工作年限薪涨幅度情况</div>
                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>
                    <div class="panel-body" style="text-align: center">
                        {% if hasEmpty %}
                            <i class="entypo-cloud" style="font-size:250px"></i>
                            <h1>
                                数据飘走啦~（暂无数据！）
                            </h1>
                        {% else %}
                            <div id="main" style="width:100%;height:480px"></div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <div class="panel-heading">
                        <div class="panel-title">学历人数</div>
                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>
                    <div class="panel-body" style="text-align: center">
                        <div id="mainTwo" style="width:100%;height:480px"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <div class="panel-heading">
                        <div class="panel-title">学历与工作经验薪资热力图</div>
                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>
                    <div class="panel-body" style="text-align: center">
                        <div id="heatmap" style="width:100%;height:480px"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <div class="panel-heading">
                        <div class="panel-title">学历薪资分布箱线图</div>
                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>
                    <div class="panel-body" style="text-align: center">
                        <div id="boxplot" style="width:100%;height:480px"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
   
            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
      
                    <div class="panel-body" style="text-align: center">
                        <div id="salaryMonth" style="width:100%;height:480px"></div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="main">


            Copyright &copy;  2025.智联招聘数据可视化分析.<a target="_blank"
                                                   href="https://www.zhipin.com/web/user/safe/verify-slider"> </a>

        </footer>
    </div>
</div>
<link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="/static/css/rickshaw.min.css">
<link rel="stylesheet" href="/static/css/datatables.responsive.css">
<link rel="stylesheet" href="/static/css/select2-bootstrap.css">
<link rel="stylesheet" href="/static/css/select2.css">
<!-- Bottom Scripts -->
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="/static/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/js/d3.v3.js"></script>
<script src="/static/js/rickshaw.min.js"></script>
<script src="/static/js/neon-chat.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
<script src="/static/js/echarts.js"></script>
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/TableTools.min.js"></script>
<script src="/static/js/dataTables.bootstrap.js"></script>
<script src="/static/js/jquery.dataTables.columnFilter.js"></script>
<script src="/static/js/lodash.min.js"></script>
<script src="/static/js/datatables.responsive.js"></script>
<script src="/static/js/fileinput.js"></script>
<script>
    var salaryDistributionData = {{ salary_distribution|safe}};
    var salaryMonthsData = {{ salary_months|safe}};
    var internSalaryData = {{ intern_salary|safe}};
    var barDataColumn = {{ barDataColumn|safe}};
    var barDataRow = {{ barDataRow|safe}};
    var barLegends = {{ barLegends|safe}};
    var charDataColumnOne = {{ charDataColumnOne|safe}};
    var charDataColumnTwo = {{ charDataColumnTwo|safe}};
    var charDataRow = {{ charDataRow|safe}};
    var experienceCategories = {{ experience_categories|safe}};
    var educationCategories = {{ education_categories|safe}};
    var heatmapData = {{ heatmap_data|safe}};
    var boxplotData = {{ boxplot_data|safe}};
</script>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    const colors = ['#5470C6', '#91CC75'];
    option = {
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        grid: {
            right: '20%'
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true},
                magicType: {show: true, type: ['line', 'bar']},
            }
        },
        legend: {
            data: ['薪资平均值', '人数']
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                // prettier-ignore
                data: {{ workExperiences | safe }}
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '薪资平均值',
                position: 'right',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value} $'
                },
                splitLine: {show: false}
            },
            {
                type: 'value',
                name: '人数',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisLabel: {
                    formatter: '{value} 人'
                }
            }
        ],
        series: [
            {
                name: '薪资平均值',
                type: 'bar',
                data: {{ charDataColumnOne }},
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max'},
                        {type: 'min', name: 'Min'}
                    ]
                },
                markLine: {
                    data: [{type: 'average', name: 'AVG'}]
                },
            },
            {
                name: '人数',
                type: 'bar',
                yAxisIndex: 1,
                data: {{ charDataColumnTwo }},
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max'},
                        {type: 'min', name: 'Min'}
                    ]
                },
                markLine: {
                    data: [{type: 'average', name: 'AVG'}]
                },
            }
        ]
    };

    option && myChart.setOption(option);

</script>
<script>
    var chartDom = document.getElementById('mainTwo');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        color: ['#5470C6'],
        title: {
            text: '学历人数柱状图'
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true},
                magicType: {show: true, type: ['line', 'bar']},
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: {{ barLegends | safe }}
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: {{ barDataRow | safe }}
        },
        series: [
            {
                name: {{ barLegends | safe }}[0],
                type: 'bar',
                data: {{ barDataColumn }},
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max'},
                        {type: 'min', name: 'Min'}
                    ]
                },
                markLine: {
                    data: [{type: 'average', name: 'AVG'}]
                },
                itemStyle: {
                    normal: {
                        color: (params) => {
                            var colorList = [
                                '#c23531',
                                '#2f4554',
                                '#61a0a8',
                                '#d48265',
                                '#91c7ae',
                                '#749f83',
                                '#ca8622'
                            ];
                            return colorList[Math.floor(Math.random() * colorList.length)];
                        }
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);

</script>
<script>
    // 热力图
    var heatmapChart = echarts.init(document.getElementById('heatmap'));
    var heatmapOption = {
        title: {
            text: '学历与工作经验薪资热力图',
            left: 'center'
        },
        tooltip: {
            position: 'top',
            formatter: function (params) {
                return '工作经验: ' + {{ experience_categories | safe }}[params.data[0]] + '<br/>' +
                       '学历: ' + {{ education_categories | safe }}[params.data[1]] + '<br/>' +
                       '平均薪资: ' + params.data[2] + '元';
            }
        },
        grid: {
            height: '50%',
            top: '10%'
        },
        xAxis: {
            type: 'category',
            data: {{ experience_categories | safe }},
            splitArea: {
                show: true
            }
        },
        yAxis: {
            type: 'category',
            data: {{ education_categories | safe }},
            splitArea: {
                show: true
            }
        },
        visualMap: {
            min: 0,
            max: 50000,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%',
            inRange: {
                color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695']
            }
        },
        series: [{
            name: '薪资分布',
            type: 'heatmap',
            data: {{ heatmap_data | safe }},
            label: {
                show: true
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    heatmapChart.setOption(heatmapOption);

    // 箱线图
    var boxplotChart = echarts.init(document.getElementById('boxplot'));
    var boxplotOption = {
        title: {
            text: '不同学历薪资分布',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: {{ boxplot_data | safe }}.map(item => item.name),
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '薪资（元）',
            splitArea: {
                show: true
            }
        },
        series: [{
            name: '薪资分布',
            type: 'boxplot',
            datasetIndex: 0,
            data: {{ boxplot_data | safe }}.map(item => item.data),
            itemStyle: {
                color: '#5470c6',
                borderColor: '#5470c6'
            }
        }]
    };
    boxplotChart.setOption(boxplotOption);

    // 添加窗口大小改变时的自适应
    window.addEventListener('resize', function() {
        heatmapChart.resize();
        boxplotChart.resize();
    });
</script>
<!-- 实习生薪资地图 -->
<script>
    var internSalaryChart = echarts.init(document.getElementById('internSalary'));
    var internSalaryOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params) {
                var data = params[0];
                return data.name + '<br/>' +
                       '平均薪资: ' + data.value + '元/月<br/>' +
                       '职位数量: ' + data.data.count + '个';
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: internSalaryData.map(function(item){return item.name;}),
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'value',
            name: '薪资（元/月）'
        },
        series: [{
            name: '平均薪资',
            type: 'bar',
            data: internSalaryData.map(function(item, index){
                var colorList1 = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
                var colorList2 = ['#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#5470c6'];
                return {
                    value: item.value,
                    count: item.count,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: colorList1[index % 8]},
                            {offset: 1, color: colorList2[index % 8]}
                        ])
                    }
                }
            }),
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                }
            }
        }]
    };
    internSalaryChart.setOption(internSalaryOption);
</script>
</body>
</html>